<template>
  <div v-if="permissionsLists(127)">
    <!-- 头部 -->
    <page-header :title="$t('m.Roles_and_Permissions')">
      <el-button type="primary" @click="createBtn" v-if="permissionsLists(164)">
        {{ $t('m.Add_an_account') }}
      </el-button>
    </page-header>

    <div class="container">
      <div class="table_box">
        <div class="table_left webkit_scrollbars">
          <div class="table_left_div">
            <span class="table_left_span">{{ $t('m.Role_permissions') }}</span>
            <img
              src="@/assets/imgs/setting/ic_add@2x.png"
              alt=""
              v-if="permissionsLists(160)"
              @click="
                params.rolesIndex = rolesIndex
                setPageNum(params.pageNum, params.pageSize, params)
                $router.push('/settings/role/cm')
              "
            />
          </div>
          <div
            class="table_left_group"
            :style="
              rolesList.length > 17 ? 'border-bottom: 1px solid #ececee' : ''
            "
            :class="{ active3: rolesList.length > 17 }"
          >
            <div
              class="table_left_group_div"
              v-for="(item, index) in rolesList"
              :class="{ active1: rolesIndex == index }"
              :key="item.id"
              @click="choiceIndex(index, item)"
            >
              <div :class="{ active1: rolesIndex == index }">
                <eltooltip
                  :content="item.roleName ? item.roleName : ''"
                ></eltooltip>
              </div>
              <img
                v-if="
                  rolesIndex == index && !item.system && permissionsLists(160)
                "
                @click.stop="editRoles(item.id)"
                src="@/assets/imgs/setting/ic_edit@2x.png"
                alt=""
                style="margin-right:8px;"
              />
              <img
                v-if="
                  rolesIndex == index && !item.system && permissionsLists(162)
                "
                @click.stop="deleteRoles(item)"
                src="@/assets/imgs/setting/ic_del@2x.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="table-box">
          <div class="ground_name">
            {{ $t('m.Account_information') }}
          </div>
          <div class="list_div">
            <div class="page_list_div" style="padding:0 0 8px 0;">
              <el-form class="page_list_top" label-position="right">
                <el-form-item
                  :label="$t('m.search_') + ':'"
                  class="page_list_top"
                >
                  <el-input
                    prefix-icon="el-icon-search"
                    style="width:260px;"
                    clearable
                    :placeholder="
                      [
                        this.$t('m.Account_name'),
                        this.$t('m.Users_Details_PhoneNo')
                      ].join(' / ')
                    "
                    v-model="params.search"
                  />
                </el-form-item>

                <el-form-item
                  :label="$t('m.branch_Creationdate') + ':'"
                  class="page_list_top"
                >
                  <el-date-picker
                    style="width:246px;"
                    v-model="params.rangeTime"
                    :picker-options="datePickerOptions"
                    :default-value="timeDefaultShow"
                    type="daterange"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="timestamp"
                    range-separator="~"
                    :start-placeholder="$t('m.start_date')"
                    :end-placeholder="$t('m.end_date')"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item class="page_list_top page_list_search">
                  <el-button
                    class="search_button reset_button"
                    @click="searchBtn()"
                    >{{ $t('m.search_') }}</el-button
                  >
                </el-form-item>
                <el-form-item class="page_list_top page_list_search">
                  <el-button class="reset_button" @click="refreshBtn()">{{
                    $t('m.refresh')
                  }}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!--表格-->
          <div class="el_table_div" style="padding:0;">
            <el-table :data="userLists">
              <emptydata slot="empty" v-if="userLists.length == 0" />
              <el-table-column
                :label="$t('m.Account_name')"
                prop="realName"
                min-width="150"
                fixed="left"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.realName | strFormat }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Users_Details_PhoneNo')"
                prop="phone"
                show-overflow-tooltip
                min-width="150"
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.phone | phoneFormat(scope.row.code)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Email')"
                prop="email"
                min-width="150"
              >
                <template #default="scope">
                  <div>{{ scope.row.email | strFormat }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Account_role')"
                prop="roleName"
                min-width="150"
              >
                <template #default="scope">
                  <div>{{ scope.row.roleName | strFormat }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.status')"
                prop="roleName"
                min-width="150"
              >
                <template #default="scope">
                  <div>{{ scope.row.state | stateFormat(optionsState) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Account_Last_active')"
                prop="loginTime"
                min-width="150"
              >
                <template #default="scope">
                  <div>{{ scope.row.loginTime | dateformat }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.branch_Creationdate')"
                prop="createTime"
                min-width="150"
              >
                <template #default="scope">
                  <div>{{ scope.row.createTime | dateformat }}</div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Users_Details_Operation')"
                min-width="104"
                fixed="right"
                v-if="isArrayEqual([164, 165, 167], permissionsLists)"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      getRoleName() != 'Franchisee admin' &&
                        getRoleName() != 'Super admin' &&
                        (scope.row.roleName == 'Franchisee admin' ||
                          scope.row.roleName == 'Super admin' ) && getUserType() == 2
                    "
                    >--</span
                  >
                  <el-dropdown placement="bottom" v-else>
                    <img
                      src="@/assets/imgs/ic_operation.svg"
                      alt=""
                      class="dropdown_img"
                    />
                    <el-dropdown-menu
                      slot="dropdown"
                      style="white-space: nowrap !important;"
                    >
                      <el-dropdown-item
                        @click.native="openDialog(scope.row)"
                        v-if="
                          permissionsLists(165) &&
                            (getRoleName() != scope.row.roleName || userInfo.id != scope.row.id )
                        "
                        >{{
                          scope.row.state == 1
                            ? $t('m.Users_Status_Dropdown_Freeze')
                            : $t('m.Account_unfreeze')
                        }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.native="openResetPasswordDialog(scope.row)"
                        v-if="permissionsLists(167)"
                        >{{ $t('m.Account_resetPasswords') }}</el-dropdown-item
                      >
                      <el-dropdown-item
                        v-if="permissionsLists(164)"
                        @click.native="editBtn(scope.row)"
                        >{{ $t('m.branch_Edit') }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <pagination
            :total="total"
            :current="params.pageNum"
            :size="params.pageSize"
            @changePageSize="handleSizeChange"
            @changePageNum="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 创建账号 / 修改账号 -->
    <el-dialog
      :title="form.id ? $t('m.Edit_account') : $t('m.branch_Create')"
      :visible.sync="dialogVisible2"
      :close-on-click-modal="false"
      v-if="dialogVisible2"
      width="520px"
    >
      <div class="dialog_content">
        <el-form :model="form" :rules="rules" ref="form">
          <div class="dialog_content1">
            {{ $t('m.Users_Details_PhoneNo') }}*
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <div class="flex_div">
              <el-select
                v-model="form.code"
                :placeholder="$t('m.pleaseChoose')"
                style="width:150px;margin-right:12px;"
                filterable
              >
                <el-option
                  v-for="(item, index) in countryCode"
                  :key="index"
                  :label="'+' + item.codes"
                  :value="Number(item.codes)"
                >
                </el-option>
              </el-select>
              <el-form-item
                class="establish_item"
                prop="phone"
                style="width:100%"
              >
                <el-input
                  oninput="value=value.replace(/[^\d]/g,'')"
                  @blur="form.phone = $event.target.value"
                  clearable
                  v-model="form.phone"
                  maxlength="15"
                  minlength="8"
                  :placeholder="$t('m.Please_enter')"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="dialog_content1">{{ $t('m.Account_name') }}*</div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="realName"
              style="width:100%"
            >
              <el-input
                clearable
                v-model="form.realName"
                maxlength="50"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog_content1" v-if="!form.id">
            {{ $t('m.Account_password') }}*
          </div>
          <div
            class="dialog_content1"
            style="padding-bottom:0;"
            v-if="!form.id"
          >
            <el-form-item
              class="establish_item"
              prop="password"
              style="width:100%"
            >
              <el-input
                clearable
                v-model="form.password"
                @input="changePassword1"
                maxlength="16"
                :placeholder="$t('m.Please_enter')"
                ><template slot="append"
                  ><div
                    style="cursor: pointer;"
                    @click="generatePassword('form')"
                  >
                    {{ $t('m.Account_Created_Auto_generate') }}
                  </div></template
                ></el-input
              >
            </el-form-item>
          </div>
          <div class="dialog_content1">{{ $t('m.Email') }}*</div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              style="width:100%"
              prop="email"
            >
              <el-input
                clearable
                v-model="form.email"
                maxlength="320"
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
          <div
            class="dialog_content1"
            v-if="
              form.roleName != 'Franchisee admin' &&
                form.roleName != 'Super admin'
            "
          >
            {{ $t('m.Account_role') }}*
          </div>
          <div
            class="dialog_content1"
            style="padding-bottom:0;"
            v-if="
              form.roleName != 'Franchisee admin' &&
                form.roleName != 'Super admin'
            "
          >
            <el-form-item
              class="establish_item"
              prop="roleIds"
              style="width:100%"
            >
              <el-select
                v-model="form.roleIds"
                :placeholder="$t('m.pleaseChoose')"
                style="width:100%;"
                filterable
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.label"
                  :value="'' + item.value"
                  v-show="!item.disabled"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button
          type="primary"
          @click="sumbit"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 冻结账号 / 解冻账号 -->
    <el-dialog
      :title="
        itemData.state == 1
          ? $t('m.Users_Status_Dropdown_Freeze')
          : $t('m.Account_unfreeze')
      "
      :visible.sync="dialogVisible3"
      :close-on-click-modal="false"
      width="520px"
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{
            itemData.state == 1
              ? $t('m.Account_Freeze_Yes')
              : $t('m.Account_Unfreeze_Yes')
          }}
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button
          type="primary"
          @click="clickState"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 删除角色 -->
    <el-dialog
      :title="$t('m.Delete_Role')"
      :visible.sync="deleteDialog"
      :close-on-click-modal="false"
      width="520px"
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Confirm_Delete_Role') }}
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button
          type="primary"
          @click="deleteBtn"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 转移账号角色权限 -->
    <el-dialog
      :title="$t('m.Transfer_account_role_permissions')"
      :visible.sync="bindingDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="520px"
      @close="$refs.bindForm.resetFields()"
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Transfer_account_role_permissions_hint') }}
        </div>

        <el-form :model="bindForm" :rules="rules" ref="bindForm">
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="roleId"
              style="width:100%"
            >
              <el-select
                v-model="bindForm.roleId"
                :placeholder="$t('m.Please_select_role')"
                style="width:100%;"
                filterable
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.label"
                  :value="'' + item.value"
                  :disabled="
                    rolesItem.id == item.value || !item.value || item.disabled
                  "
                  v-show="
                    rolesItem.id != item.value && item.value && !item.disabled
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            bindingDialog = false
            $refs.bindForm.resetFields()
          "
          class="cancel_btn"
          >{{ $t('m.cancel') }}</el-button
        >
        <el-button
          type="primary"
          @click="submitBind"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog
      :title="$t('m.Account_resetPasswords')"
      :visible.sync="dialogVisible1"
      :close-on-click-modal="false"
      width="520px"
    >
      <div class="dialog_content">
        <el-form ref="loginForm" :model="loginForm" :rules="rulesForm">
          <div class="dialog_content1">
            {{ $t('m.NewPassword') }}<span style="color:#fd5749">*</span>
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="password"
              style="width:100%"
            >
              <el-input
                v-model="loginForm.password"
                @input="changePassword2"
                maxlength="16"
                show-password
                autoComplete="new-password"
                clearable
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog_content1">
            {{ $t('m.Login_Code_Input_Password_Again')
            }}<span style="color:#fd5749">*</span>
          </div>
          <div class="dialog_content1" style="padding-bottom:0;">
            <el-form-item
              class="establish_item"
              prop="passwords"
              style="width:100%"
            >
              <el-input
                v-model="loginForm.passwords"
                @input="changePassword3"
                maxlength="16"
                show-password
                autoComplete="new-password"
                clearable
                :placeholder="$t('m.Please_enter')"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button
          type="primary"
          @click="restPwd"
          class="cancel_btn confirm_btn"
          >{{ $t('m.confirm_') }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import countries from '@/common/json/countries.json'
import pagination from '@/components/pagination.vue'
export default {
  components: { pagination },
  data () {
    // 验证密码
    const checkPassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,16}$/
      if (!value) {
        return callback(new Error(this.$t('m.Enterpassword')))
      } else if (!reg.test(value)) {
        return callback(new Error(this.$t('m.Set_login_password')))
      } else {
        callback()
      }
    }
    const checkPasswords = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,16}$/
      if (!value) {
        return callback(new Error(this.$t('m.Login_Code_Input_Password_Again')))
      } else if (!reg.test(value)) {
        return callback(new Error(this.$t('m.Set_login_password')))
      } else if (value.trim() != this.loginForm.password) {
        return callback(
          new Error(this.$t('m.Login_Code_Input_Password_Variance'))
        )
      } else {
        callback()
      }
    }
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为：‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      },
      params: {
        pageNum: 1, //页
        pageSize: 10, //页大小
        roleId: '',
        rangeTime: '',
        search: ''
      }, //搜索参数
      userLists: [], //系统用户-列表
      total: 0,
      options1: [{ value: '', label: this.$t('m.all') }],
      rolesList: [
        {
          id: null,
          roleName: this.$t('m.All_accounts'),
          system: true
        }
      ], //角色组
      rolesItem: '', //计费对象
      rolesIndex: 0, //计费index
      optionsState: [
        { value: 1, label: this.$t('m.Users_Status_Dropdown_Normal') },
        { value: 2, label: this.$t('m.Users_Status_Dropdown_Freeze') }
      ],
      loginForm: {
        password: '',
        passwords: ''
      },
      bindForm: {
        roleId: ''
      }, //转移参数
      rulesForm: {
        password: [
          { validator: checkPassword, required: true, trigger: 'blur' }
        ],
        passwords: [
          { validator: checkPasswords, required: true, trigger: 'blur' }
        ]
      },
      dialogVisible1: false, //修改密码
      dialogVisible2: false, //修改/创建
      dialogVisible3: false, //冻结/解冻
      deleteDialog: false, //删除角色
      bindingDialog: false, //转移账号角色权限
      itemData: '', //修改密码 / 修改身份
      countryCode: '', //国家码
      roleList: [],
      form: {
        code: this.$country.codes, //	区号
        email: '', //邮箱
        id: null, //id
        password: '', //	密码
        phone: '', //手机
        realName: '', //真实姓名
        roleIds: '' //角色id
      },
      rules: {
        realName: [
          {
            required: true,
            message: this.$t('m.Account_name_enter'),
            trigger: 'blur'
          }
        ],
        phone: this.$rule.phone,
        password: { validator: checkPassword, required: true, trigger: 'blur' },
        roleIds: [
          {
            required: true,
            trigger: 'change',
            message: this.$t('m.Please_select_role')
          }
        ],
        roleId: [
          {
            required: true,
            message: this.$t('m.Please_select_role'),
            trigger: 'change'
          }
        ],
        email: [
          {
            required: true,
            message: this.$t('m.Please_enter_Email'),
            trigger: 'blur'
          },
          {
            pattern: this.$reg.email.val,
            message: this.$t('m.EnterCorrectEmail'),
            trigger: 'blur'
          }
        ]
      },
      permissionsIds: []
    }
  },

  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(127)) {
      return
    }
    this.params = this.$cache.get('searchParams')
      ? this.$cache.get('searchParams')
      : this.params
    this.countryCode = countries
    this.getRoleGroup()

    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    // 系统角色-获取全部
    getRoleGroup () {
      this.$api.role
        .getList({
          search: ''
        })
        .then(res => {
          if (res.code == 0) {
            this.rolesList = this.$options.data.call(this).rolesList
            this.rolesList = this.rolesList.concat(res.data)
            this.rolesIndex = this.params.rolesIndex
              ? this.params.rolesIndex
              : 0
            if (this.rolesList.length > 0) {
              this.rolesItem = this.params.rolesIndex
                ? this.rolesList[this.params.rolesIndex]
                : this.rolesList[0]

              this.getRoleList()
            }
          }
        })
    },

    // 系统角色-获取账号
    getRoleList () {
      if (!this.permissionsLists(163)) {
        return
      }
      this.$api.account.getList(this.params).then(res => {
        if (res.code == 0) {
          // console.log(res.data)
          this.userLists = res.data.records
          this.total = res.data.total
        }
      })
    },

    // 编辑角色
    editRoles (id) {
      this.params.rolesIndex = this.rolesIndex
      this.setPageNum(this.params.pageNum, this.params.pageSize, this.params)
      this.$router.push({ path: '/settings/role/cm', query: { id: id } })
    },

    // 删除角色
    deleteRoles (items) {
      this.itemData = items
      if (this.total == 0) {
        this.deleteDialog = true
      } else {
        this.getRoles()
        this.bindForm.roleId = ''
        this.bindingDialog = true
      }
    },

    deleteBtn () {
      this.$api.account.deleteSysRoles(this.itemData.id).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.params.roleId = ''
          this.remPageNum()
          this.getRoleGroup()
          this.deleteDialog = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submitBind () {
      this.$refs.bindForm.validate(valid => {
        if (valid) {
          this.$api.account
            .changeSysUser(this.itemData.id, this.bindForm)
            .then(res => {
              if (this.$ok(res)) {
                this.$message.success(res.message)
                this.getRoleList()
                this.bindingDialog = false
              } else {
                this.$message.error(res.message)
              }
            })
          // console.log('submitBind!')
        } else {
          // console.log('error submitBind!!')
          return false
        }
      })
    },

    //切换页大小
    handleSizeChange (val) {
      this.params.pageSize = val
      this.getRoleList()
    },

    //切换页
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.getRoleList()
    },

    //搜索
    searchBtn () {
      this.params.pageNum = 1
      this.remPageNum()
      this.getRoleList()
    },

    //重置
    refreshBtn () {
      this.params = this.$options.data.call(this).params
      this.params.roleId = this.rolesItem.id
      this.remPageNum()
      this.getRoleList()
    },

    //选择
    choiceIndex (index, item) {
      this.rolesIndex = index
      this.rolesItem = item
      this.params = this.$options.data.call(this).params
      this.params.roleId = this.rolesItem.id
      this.userLists = []
      this.total = 0
      this.getRoleList()
    },

    //获取角色下拉
    getRoles () {
      this.roleList = []
      this.$api.account.getRoleList().then(res => {
        res.data.forEach(item => {
          this.roleList.push({
            value: item.id,
            label: item.roleName,
            disabled: item.system
          })
        })
      })
    },
    //打开状态弹窗
    openDialog (item) {
      this.itemData = item
      this.dialogVisible3 = true
    },

    // 修改状态
    clickState () {
      this.$api.account
        .modifyState({
          id: this.itemData.id,
          state: this.itemData.state == 1 ? 2 : 1
        })
        .then(res => {
          if (this.$ok(res)) {
            this.$message.success(res.message)
            this.dialogVisible3 = false
            this.getRoleList()
          } else {
            this.$message.error(res.message)
          }
        })
    },

    // 打开重置密码
    openResetPasswordDialog (item) {
      this.itemData = item
      this.dialogVisible1 = true
      this.loginForm = this.$options.data.call(this).loginForm
    },

    //重置密码
    restPwd () {
      this.$refs.loginForm.validate(valid => {
        if (!valid) {
          return
        }
        this.$api.account
          .resetPwd(this.itemData.id, this.$md5(this.loginForm.password))
          .then(res => {
            if (this.$ok(res)) {
              this.dialogVisible1 = false
              this.$message.success(res.message)
              this.getRoleList()
            } else {
              this.$message.error(res.message)
            }
          })
      })
    },

    //随机生成密码
    generatePassword (formName) {
      this.randomGeneration(8)
      if (this.form.password) {
        this.$refs[formName].validateField('password')
      }
    },
    // 生成随机数字和字母的组合
    randomGeneration (length) {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/
      let result = ''
      const characters =
        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      const charactersLength = characters.length
      for (let i = 0; i < length; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * charactersLength)
        )
      }
      if (!reg.test(result)) {
        this.randomGeneration(length)
      } else {
        this.form.password = result
      }
    },

    //密码输入限制
    changePassword1 (val) {
      this.form.password = this.$check.password(val)
    },
    changePassword2 (val) {
      this.loginForm.password = this.$check.password(val)
    },
    changePassword3 (val) {
      this.loginForm.passwords = this.$check.password(val)
    },

    //创建/编辑账号
    sumbit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.save()
      })
    },
    save () {
      let params = { ...this.form }
      params.roleIds = [params.roleIds]
      if (params.password) {
        params.password = this.$md5(params.password)
      }
      this.$api.account.createModify(params).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.dialogVisible2 = false
          this.getRoleList()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //打开创建账号
    createBtn () {
      this.getRoles()
      this.dialogVisible2 = true
      this.form = this.$options.data.call(this).form
    },

    //打开编辑账号
    editBtn (item) {
      this.getRoles()
      this.form = this.$options.data.call(this).form
      this.$api.account.getDetail(item.id).then(res => {
        if (this.$ok(res)) {
          this.form = {
            code: res.data.code,
            email: res.data.email,
            id: res.data.id,
            phone: res.data.phone,
            realName: res.data.realName,
            roleName: res.data.roleName,
            roleIds: [res.data.roleIds].toString(),
            username: res.data.username
          }
          this.dialogVisible2 = true
          // console.log(this.form)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.table_box {
  min-width: 1092px;
  display: flex;
  background: #ffffff;
  border-radius: 10px;
  .table-box {
    min-width: 872px;
    flex: 1;
    padding: 20px;
    .ground_name {
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 22px;
      margin-bottom: 20px;
    }
  }
  .table_left {
    width: 256px;
    min-width: 256px;
    border-right: 1px solid #ececee;
    .table_left_div {
      padding: 20px 12px 20px 20px;
      border-bottom: 1px solid #ececee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .table_left_span {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 22px;
      }
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    .table_left_group {
      width: 255px;
      min-width: 255px;
      max-height: 680px;
      min-height: 380px;
      .table_left_group_div {
        padding: 12px 12px 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        div {
          width: 180px !important;
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #39404d;
          line-height: 16px;
          margin-right: 4px;
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .table_left_group_div:hover {
        background: #f2f5fa;
        color: var(--text-color) !important;
        div {
          background: #f2f5fa;
          color: var(--text-color) !important;
        }
      }
      .active1 {
        background: #f2f5fa;
        color: var(--text-color) !important;
        ::v-deep .el-tooltip {
          color: var(--text-color) !important;
        }
      }
    }
  }
  .price_plan {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .price_plan_name {
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #39404d;
      line-height: 16px;
      margin-bottom: 6px;
    }
    .price_plan_rule {
      font-size: 12px;
      font-weight: 400;
      text-align: left;
      color: #646b80;
      line-height: 14px;
    }
    .price_plan_button {
      border: 1px solid #d2d8e2;
      background-color: #ffffff;
      color: var(--text-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding: 10px 20px;
      height: 36px;
      font-weight: 500;
      line-height: 36px;
      margin-left: 50px;
      margin-top: 7px;
    }
  }
}

.active3 {
  overflow: hidden;
  overflow-y: scroll; //纵行超过隐藏
}

.el-icon-arrow-right {
  color: var(--text-color);
}

.flex_div {
  display: flex;
  align-items: start;
  justify-content: start;
}
</style>
